<template>
	<view class="qx-pop" v-show="isVisible">
    
    <view class="modal-mask"></view>
    <view :class="{ active: isVisible }" class="modal-body">
        <view class="modal-wrapper-box">
            <image src="@/static/updata.png" style="width:150rpx;height: 150rpx;border-radius: 10rpx 10rpx 0 0;position: absolute;z-index: 999;left: 50%;transform: translateX(-50%);top: 80rpx;" mode="aspectFill"></image>
            <image src="@/static/loginbg.png" style="width:604rpx;height: 400rpx;border-radius: 10rpx 10rpx 0 0;" mode="aspectFill"></image>
            <view class="modal-hd">发现新版本</view>
            <view class="modal-bd">{{obj.version}}</view>
            <view class="modal-bd" style="padding-top: 0;" v-html="obj.content"></view>
            <view class="modal-bd">
              <view class="yesbut" @click="handleConfirm" >马上升级</view>
              <view style="text-align: center;margin-top: 20rpx;font-size: 24rpx;" @click="show(false)" v-if="obj&&obj.is_mandatory!=1" >以后再说</view>
            </view>
        </view>
    </view>
  </view>
</template>

<script>
	export default {
    props:['obj','getlaunch'],
		data() {
			return {
        isVisible:false
			};
		},
    methods:{
      show(val){
        this.isVisible = val;
        if(!val){
          this.getlaunch()
        }
      },
      handleConfirm(){
        console.log('版本更新',uni.getSystemInfoSync().platform == 'android')
        if(uni.getSystemInfoSync().platform == 'android'){
          this.doUpData()
        }else{
          plus.runtime.launchApplication({
          	action: `itms-apps://itunes.apple.com/cn/app/id${this.obj.ios_package}?mt=8`
          }, function(e) {
          	console.log('Open system default browser failed: ' + e.message);
          });
          console.log(1)
        }
      },
      doUpData() {
          uni.showLoading({
              title: '更新中……'
          })
          uni.downloadFile({//执行下载
              url: this.obj.android_package, //下载地址
              success: downloadResult => {//下载成功
                  uni.hideLoading();
                  if (downloadResult.statusCode == 200) {
                      uni.showModal({
                          title: '',
                          content: '更新成功，确定现在安装吗？',
                          confirmText: '安装',
                          confirmColor: '#EE8F57',
                          success: function(res) {
                              if (res.confirm == true) {
                                  plus.runtime.install(//安装
                                      downloadResult.tempFilePath, {
                                          force: true
                                      },
                                      function(res) {
                                          utils.showToast('更新成功，安装中');
                                          plus.runtime.restart();
                                      }
                                  );
                              }
                          }
                      });
                  }
              }
          });
      }
    }
	}
</script>

<style lang='scss'>
.qx-pop {
    position: fixed;
    z-index: 999999999999999999;
    transition: all 0.3s ease-in-out;
}

.modal-mask {
  z-index: 999999999999999999;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.4);
}
.yesbut{
  background-color: #004FBF;
  color: #FFFFFF;
  border-radius: 10rpx;
  text-align: center;
  font-size: 30rpx;
  width: 440rpx;
  margin: 0 auto;
  padding: 16rpx 0;
}
.modal-body {
  z-index: 999999999999999999;
    display: flex;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    justify-content: center;
    align-items: center;
    transition-timing-function: ease;
    transition-duration: 0.3s;
    transition-property: opacity;
}

.modal-body.active {
  z-index: 999999999999999999;
  opacity: 1;
  height: 100vh;
}

.modal-wrapper-box {
  position: relative;
    z-index: 999999999999999999;
    width: 80%;
    background-color: #ffffff;
    text-align: center;
    border-radius: 10rpx;
    .modal-hd,
    .modal-ft {
        padding: 36rpx 60rpx 12rpx;
        font-size: 36rpx;
    }
    .modal-hd{
      position: absolute;
      top: 250rpx;
      width: 600rpx;
      font-size: 40rpx;
      font-weight: bold;
      color: #FFFFFF;
      text-align: center;
      padding-bottom: 20rpx;
    }

    .modal-bd {
      z-index: 999999999999999999;
        font-size: 28rpx;
        padding:30rpx 60rpx;
        max-height: 50vh;
        overflow: scroll;
        text-align: left;
        line-height: 1.3;
    }

    .modal-ft {
      z-index: 999999999999999999;
        padding-bottom: 36rpx;
        border-top: 1px solid #efefef;
    }
}
</style>
